<!--顶部导航组件-->
<template>
  <div class="parent">
    <el-menu :default-active="defaultMenu" class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             theme="light"
             :router="true"
             :unique-opened="true"
             :collapse="menuStatus">
      <el-menu-item index="/container/index">
        <i class="icon-menu ydg-icon-shouye"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-submenu index="2">
        <template slot="title">
          <i class="icon-menu ydg-icon-resouce"></i>
          <span slot="title">商户管理</span>
        </template>
        <el-menu-item index="/container/seller_partition">
          <i class="icon-menu ydg-icon-video-manage"></i>
          <span slot="title">分区管理</span>
        </el-menu-item>
        <el-menu-item index="/container/seller_list">
          <i class="icon-menu ydg-icon-video-fen-lei"></i>
          <span slot="title">商户列表</span>
        </el-menu-item>
        <el-menu-item index="/container/seller_red_bag">
          <i class="icon-menu ydg-icon-video-fen-lei"></i>
          <span slot="title">商户红包</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="icon-menu ydg-icon-ping-lun-manage"></i>
          <span slot="title">骑手管理</span>
        </template>
        <el-menu-item index="/container/rider_list">
          <i class="icon-menu ydg-icon-ping-lun-list"></i>
          <span slot="title">骑手列表</span>
        </el-menu-item>
        <el-menu-item index="/container/rider_order_wait">
          <i class="icon-menu ydg-icon-goods"></i>
          <span slot="title">未接单列表</span>
        </el-menu-item>
        <el-menu-item index="/container/rider_distri_state">
          <i class="icon-menu ydg-icon-user-auth"></i>
          <span slot="title">配送状况</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="icon-menu ydg-icon-orders"></i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-item index="/container/order_list">
          <i class="icon-menu ydg-icon-ping-lun-list"></i>
          <span slot="title">订单查询</span>
        </el-menu-item>
        <el-menu-item index="/container/order_list_wait">
          <i class="icon-menu ydg-icon-goods"></i>
          <span slot="title">待处理订单</span>
        </el-menu-item>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="icon-menu ydg-icon-user-sys"></i>
          <span slot="title">系统管理</span>
        </template>
        <el-menu-item index="/container/sys_account_info">
          <i class="icon-menu ydg-icon-user-auth"></i>
          <span slot="title">账号设置</span>
        </el-menu-item>
        <el-menu-item index="/container/sys_base_info">
          <i class="icon-menu ydg-icon-user"></i>
          <span slot="title">基本信息</span>
        </el-menu-item>
        <el-menu-item index="/container/sys_income_detail">
          <i class="icon-menu ydg-icon-user-auth"></i>
          <span slot="title">收入明细</span>
        </el-menu-item>
        <el-menu-item index="/container/sys_operator_list">
          <i class="icon-menu ydg-icon-goods"></i>
          <span slot="title">操作员列表</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        defaultMenu: ""
      }
    },
    props: {
      menuStatus: false
    },
    watch: {
      "menuStatus": function () {
      }
    },
    components: {},
    activated() {
      this.switchMenuByPath();
    },
    beforeRouteLeave(to, from, next) {
      next();
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

      //根据路径修改菜单
      switchMenuByPath() {
        let currentPath = this.$router.currentRoute.path;
        if (currentPath === "/container/index") {
          this.defaultMenu = "/container/index";
        } else if (currentPath === "/container/seller_list") {
          this.defaultMenu = "/container/seller_list";
        } else if (currentPath === "/index/seller_partition") {
          this.defaultMenu = "/container/seller_partition";
        } else if (currentPath === "/container/rider_list") {
          this.defaultMenu = "/container/rider_list";
        } else if (currentPath === "/container/order_list") {
          this.defaultMenu = "/container/order_list";
        } else if (currentPath === "/container/order_list_wait") {
          this.defaultMenu = "/container/order_list_wait";
        } else if (currentPath === "/container/sys_income_detail") {
          this.defaultMenu = "/container/sys_income_detail";
        } else if (currentPath === "/container/sys_base_info") {
          this.defaultMenu = "/container/sys_base_info";
        } else if (currentPath === "/container/seller_red_bag") {
          this.defaultMenu = "/container/seller_red_bag";
        } else if (currentPath === "/container/rider_order_wait") {
          this.defaultMenu = "/container/rider_order_wait";
        } else if (currentPath === "/container/rider_distri_state") {
          this.defaultMenu = "/container/rider_distri_state";
        } else if (currentPath === "/container/sys_operator_list") {
          this.defaultMenu = "/container/sys_operator_list";
        } else if (currentPath === '/container/sys_account_info') {
          this.defaultMenu = "/container/sys_account_info";
        }
      },
    }
  }
</script>
<style lang="scss" scoped="" type="text/scss" src="../../assets/style/c-nav-left.scss">
</style>

